<template>
  <div class="collection_box">
    <div class="list_box" v-if="!this.isError">
      <div class="mask"></div>
      <div class="collection_img" v-lazy:background-image="this.favoriteInfo.favoriteImage">
        <h1 class="favorite_info">{{this.favoriteInfo.favoriteName}}</h1>
      </div>
      <div class="collection_item_wrapper">
        <div class="article_box" v-if="!this.isEnd">
          <!-- 单篇文章 -->
          <div class="list" v-for="(item,index) in articles" v-if="articles">
            <router-link :to="{path:'/post/'+item.articleId}" target="_blank">
              <div class="box_wrapper">
                <div class="head_wrapper">
                  <!-- 文章标题 -->
                  <div class="article_title">
                    <router-link :to="{path:'/post/'+item.articleId}" target="_blank">{{item.title}}</router-link>
                  </div>
                  <!-- 作者信息 -->
                  <div class="article_info">
                    <span>
                      <router-link
                        :to="{path:'/user/'+item.userid}"
                        target="_blank"
                      >{{item.username}}</router-link>
                    </span>
                    <span class="dot">·</span>
                    <!-- <span>{{item.articlePostTime}}</span> -->
                    <span>{{item.articlePostTime | timeAgo}}</span>
                  </div>
                </div>
                <div class="content_wrapper">
                  <div class="summary_wrapper">
                    <!-- 文章摘要 -->
                    <div class="article_summary">
                      <router-link
                        :to="{path:'/post/'+item.articleId}"
                        target="_blank"
                        v-html="item.articleSummaryInfo"
                      />
                    </div>
                    <!-- 文章操作 -->
                    <div class="article_option">
                      <ul class="option_wrapper">
                        <!-- actived激活类 -->
                        <li
                          class="likes"
                          :class=" {actived:!!item.islike}"
                          @click.prevent="changeIsLike(item.islike,item.articleId,index)"
                        >
                          <i class="iconfont icon-like-active-"></i>
                          <span>{{item.articleLikes}}</span>
                        </li>
                        <li class="comments">
                          <i class="iconfont icon-pinglun"></i>
                          <span>{{item.articleComments}}</span>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <!-- 文章封面大图 -->
                  <div class="article_img" v-if="item.screenShot">
                    <img :src="item.screenShot" alt />
                  </div>
                </div>
              </div>
            </router-link>
          </div>
        </div>
        <NoMore v-if="this.isEnd" class="end" />
      </div>
    </div>

    <NotFound v-if="this.isError" />
  </div>
</template>

<script>
import NotFound from "@/views/NotFound.vue";
import NoMore from "@/components/NoMore.vue";

export default {
  name: "collections",
  components: {
    NotFound,
    NoMore
  },
  data() {
    return {
      favoriteid: this.$route.params.cid,
      favoriteInfo: {},
      articles: [],
      loading: false,
      isEnd: false,
      isError: false
    };
  },
  watch: {
    $route(val) {
      this.favoriteid = this.$route.params.cid;
    },
    favoriteid(val) {
      this.$set(this, "articles", []);
      this.getArticlesByFavoriteId(val);
    }
  },
  methods: {
    getArticlesByFavoriteId(favoriteid) {
      if (!this.loading) {
        this.loading = true;
        let myid = this.$store.state.user.uid;
        this.$axios
          .get("/getArticlesByFavoriteId", {
            params: {
              favoriteid: favoriteid,
              myid: myid
            }
          })
          .then(res => {
            this.loading = false;
            if (res.data.code == "0" && res.data.data.articles) {
              this.articles = res.data.data.articles;
              this.favoriteInfo = res.data.data.favoriteinfo;
              if (res.data.data.articles.length == 0) {
                // 请求成功 没有数据
                this.isEnd = true;
              }
            } else {
              this.isError = !this.isError;
            }
          })
          .catch(err => {
            console.log(err.response);
            this.isError = !this.isError;
          });
      } else {
        return;
      }
    },

    //点赞或取消点赞
    changeIsLike(islike, articleid, index) {
      if (!this.loading) {
        //点赞或取消点赞前先判断用户是否登录
        let isLogin = this.$store.state.isAuthenticated;
        let uid = this.$store.state.user.uid;
        // 若未登录则要求登录
        if (isLogin) {
          let action;
          if (!!islike) {
            action = "/unlike";
          } else {
            action = "/like";
          }
          this.$axios
            .get(action, {
              params: {
                uid: uid,
                articleid: articleid
              }
            })
            .then(res => {
              // 取消点赞图标激活类
              this.articles[index].islike = !this.articles[index].islike;
              // 点赞数+1/-1
              if (!islike) {
                this.articles[index].articleLikes =
                  this.articles[index].articleLikes + 1;
              } else {
                this.articles[index].articleLikes =
                  this.articles[index].articleLikes - 1;
              }
              this.loading = false;
            })
            .catch(err => {
              this.$Message.error({
                background: true,
                content: "操作失败",
                duration: 2.5
              });
            });
        } else {
          // 弹出登录框
          this.$store.dispatch("setIsToLogin", true);
        }
      } else {
        return;
      }
    }
  },
  mounted() {
    this.getArticlesByFavoriteId(this.favoriteid);
  }
};
</script>

<style lang='scss'>
.collection_box {
  .list_box {
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #fff;
    }
    .collection_img {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 13rem;
      background-color: #ddd;
      background-position: 50%;
      background-repeat: no-repeat;
      background-size: cover;
      .favorite_info {
        color: #fff;
        font-size: 2.5rem;
      }
    }
    .collection_item_wrapper {
      position: relative;
      max-width: 960px;
      margin: 0 auto;
      background-color: #fff;
      .article_box {
        .list {
          background-color: #fff;
          border-bottom: 1px solid #eee;
          a {
            color: #000;
          }
          .box_wrapper {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
            padding: 18px 18px;
            .head_wrapper {
              color: #b2bac2;
              .article_title {
                color: #000;
                font-size: 20px;
                font-weight: 600;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                a:hover {
                  text-decoration: underline;
                }
              }
              .article_info {
                margin-top: 5px;
                .dot {
                  padding: 0 5px;
                }
                a {
                  color: inherit;
                }
                a:hover {
                  color: #007fff;
                }
              }
            }
            .content_wrapper {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              margin-top: 5px;
              .summary_wrapper {
                flex: 1;
                display: flex;
                flex-direction: column;
                width: 100%;
                align-content: space-between;
                .article_summary {
                  flex: 1;
                }
                .article_option {
                  margin-top: 10px;
                  .option_wrapper {
                    display: inline-block;
                    border: 0.5px solid #e3e3e3;
                    .actived {
                      color: #19be6b;
                    }
                    li {
                      float: left;
                      padding: 0 10px;
                      color: #909090;
                      height: 30px;
                      line-height: 30px;
                      i {
                        font-size: 15px;
                      }
                      span {
                        font-size: 0.9rem;
                        font-weight: 700;
                        padding-left: 5px;
                      }
                    }
                    li:nth-child(1) {
                      border-right: 0.5px solid #e3e3e3;
                    }
                  }
                }
              }
              .article_img {
                margin-left: 25px;
                height: 60px;
                width: 60px;
                img {
                  height: 100%;
                  width: 100%;
                  object-fit: cover;
                }
              }
            }
          }
        }
      }
      .end {
        padding-top: 5rem;
      }
    }
  }
}
</style>